<template>
  <div class="mt10">
    <div class="clearfix">
      <span class="mr10">行业店铺定向</span>
      <span class="s_fc_9 mr10" style="max-width: 76%;" title="近期访问过行业优质店铺的人群">近期访问过行业优质店铺的人群</span>
      <el-button @click="industryShowModal" type="text">设置定向</el-button>
      <div class="popup">
        <el-dialog
          title="行业店铺定向"
          :visible.sync="industryDialog"
          :close-on-click-modal="false"
          width="998px">
          <div style="height:auto;" class="slotContent">
            <div class="searchBox">
              <input class="input w280" placeholder="类目/风格关键词" v-model="Tip">
              <el-button type="primary" size="small" @click.native="searchIndustry">获取行业店铺标签</el-button>
            </div>
            <div class="key-result clearfix">
              <div class="key-result-box">
                <div class="key-result-header">
                  <span class="fl color-grey">定向标签</span>
                </div>
                <div class="key-result-items clearfix" id="key-recommended-items">
                  <!--一个定向标签Start-->
                  <div v-for="(label,index) in labels">
                    <div class="pr key-result-item">
                      <!--加号-->
                      <i class="plus" v-if="label.child" @click="openList(label)" :class="getColor(index)"></i>
                      <span class="fl" :class="isTrue(label.status)" :title="label.industry_shop_name"
                            :industry_shop_id="label.industry_shop_id">{{label.industry_shop_name}}</span>
                      <span class="fr color-grey" v-show="label.status" @click="add(index)">添加</span>
                      <div class="clearfix"></div>
                    </div>
                    <!--子标签Start-->
                    <div v-if="label.child" v-show="label.state">
                      <div class="pr key-result-item" v-for="(item,i) in label.child" style="padding-left: 15px;">
                        <span class="fl" :class="isTrue(item.status)"
                              :title="item.industry_shop_name">{{item.industry_shop_name}}</span>
                        <span class="fr color-grey" v-show="item.status" @click="subAdd(index,i)">添加</span>
                        <div class="clearfix"></div>
                      </div>
                    </div>
                    <!--子标签End-->
                    <div class="clearfix"></div>
                  </div>
                  <!--一个定向标签End-->
                </div>
              </div>
              <div class="key-result-gap">
                <i class="el-icon-d-arrow-right" style="font-size:20px;"></i>
              </div>
              <div class="key-result-box">
                <div class="key-result-header">
                  <span class="fl color-grey">已选标签</span>
                  <span class="fr color-blue" @click="removeAll">全部移除</span>
                </div>
                <div class="key-result-items">
                  <ul v-if="selectedLabels.length>0">
                    <li class="key-result-item" v-for="(item,index) in selectedLabels">
                      <span class="fl" :title="item.industry_shop_name"><i
                        v-if="item.industry_shop_group">{{item.industry_shop_group}}-</i>{{item.industry_shop_name}}</span>
                      <span class="fr" @click="remove(index)">移除</span>
                    </li>
                  </ul>
                </div>
                <div class="key-result-bottom">
                  <span class="color-grey">已选个数 {{selectedLabels.length}}/15</span>
                </div>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer slotFooter">
            <a href="javascript:;" class="warning" v-show="warning1">
              <i class="el-icon-warning"></i>
              请至少选择一个定向标签
            </a>
            <el-button @click="industryDialog=false" size="small">取 消</el-button>
            <el-button type="primary" @click="industryConfirm"  size="small">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<style src="./style.styl" scoped lang="stylus"></style>
<script>
  export default {
    props:{
      industryMsg:Array
    },
    data() {
      return {
        industryDialog: false,
        Tip: '',
        warning1: false,
        labels: [],
        selectedLabels: [],
        industryList: [],
      }
    },
    created() {
      this._getTip();
    },
    methods: {
      industryShowModal() {//行业店铺定向
        this.industryList = this.industryMsg;
        this.$http.get('/zuanzhan/crowd/industry-shop').then((res) => {//为了防止进去labels还是关键词搜索结果
//          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data;
            this.Tip = '';//关键词清空
            this.selectedLabels.forEach((item, index) => {//labels里status置为1
              item.status = 1;
            });
            this.selectedLabels=[];//谈开弹窗前恢复所有状态为未选中，弹窗右侧清空
            if(this.industryList.length>0){
              for (let i = 0; i < this.industryList.length; i++) {
                for (let j = 0; j < this.labels.length; j++) {
                  var isBreak=false;
                  if(this.labels[j].industry_shop_id===this.industryList[i].industry_shop_id){
                    this.labels[j].status=0;
                    if(this.industryList[i].matrix_price){//an如果有出价就给labels加上出价值
                      this.labels[j].matrix_price=this.industryList[i].matrix_price;
                    }
                    this.selectedLabels.push(this.labels[j])//遍历industryList修改相应的labels中的状态，并push弹框selectedLabels
                    break;
                  }
                  if(this.labels[j].child){
                    for (let k = 0; k < this.labels[j].child.length; k++) {
                      if(this.labels[j].child[k].industry_shop_id===this.industryList[i].industry_shop_id){
                        this.labels[j].child[k].status=0;
                        if(this.industryList[i].matrix_price){//an如果有出价就给labels加上出价值
                          this.labels[j].child[k].matrix_price=this.industryList[i].matrix_price;
                        }
                        this.selectedLabels.push(this.labels[j].child[k])
                        console.log(this.labels[j].child[k])
                        //遍历industryList修改相应的labels.child中的状态，并push弹框selectedLabels
                        isBreak=true;
                        break;
                      }
                    }
                    if(isBreak){
                      break;
                    }
                  }
                }
              }
            }
            this.industryDialog = true;
            this.warning1 = false;
          }
        }).catch((error) => {
          console.log(error);
        });

      },
      _getTip() {//加载标签
        this.$http.get('/zuanzhan/crowd/industry-shop').then((res) => {
//          console.log(res.data);
          if (res.data.code == 200) {
            let data = res.data;
            this.labels = data.data;
          }
        }).catch((error) => {
          console.log(error);
        });
      },
      searchIndustry() {//搜索行业店铺标签
//        console.log(this.Tip)
        if (this.Tip != '') {
          this.$http.get('/zuanzhan/crowd/industry-shop', {
            params: {
              industry_shop_name: this.Tip
            }
          }).then((res) => {
//            console.log(res.data);
            if (res.data.code == 200) {
              let data = res.data;
              this.labels = data.data;
              //console.log(this.labels);
            }
          }).catch((error) => {
            console.log(error);
          });
        }
      },
      getColor(index){//减号变蓝色
        return this.labels[index].state ? 'color-blue el-icon-remove-outline' : 'el-icon-circle-plus-outline';
      },
      openList(label) {//点击加号展开行业店铺定向标签
        console.log(label)
        if(label.state){
          label.state = false;
        }else{
          this.$set(label,'state',true)
        }
      },
      isTrue(status) {//根据status判断添加按钮前面那行字体的颜色
        return status ? '' : 'color-c'
      },
      add(index) {//添加行业店铺定向标签
        this.labels[index].status = 0;
        this.selectedLabels.push(this.labels[index]);
        if (this.warning1) this.warning1 = false;
      },
      subAdd(index, i) {//添加行业店铺子标签
        this.labels[index].child[i].status = 0;
        this.selectedLabels.push(this.labels[index].child[i]);
        if (this.warning1) this.warning1 = false;
      },
      remove(index) {//移除行业店铺定向标签
        this.selectedLabels[index].status = 1;
        this.selectedLabels.splice(index, 1);
      },
      removeAll() {//移除全部
        this.selectedLabels.forEach((item, index) => {
          item.status = 1;
        })
        this.selectedLabels = [];
      },
      industryConfirm() {//行业店铺定向的确认
        if (!this.selectedLabels.length) {
          this.warning1 = true;
        } else {
          this.warning1 = false;
          this.industryList = JSON.parse(JSON.stringify(this.selectedLabels));
          this.industryList.forEach((item,index)=>{
            if(!item.matrix_price){//an如果没有值才赋为空
              item.matrix_price = {};
            }
          });
          this.$emit("industryData",this.industryList);//传给父组件
          this.industryDialog = false;
        }
      }
    }
  }
</script>

